<template>
  <TopNavBar @rightClick="handleRightClick" rightType="true" title="AI智能量化" type="back"  />
  <div style="height: 40px"></div>
  <div style="padding: 0 24px">
    <div class="smart-quant-container" style="position: relative">
        
      <div class="sq-header">
        <div class="sq-title">活期-{{ headerObj.title }}</div>
        <div class="sq-profit">
          收益 <span class="sq-profit-rate">{{ headerObj.avgRate }} %</span> <span style="color: #fff">週期 {{ headerObj.days }} 天</span>
        </div>
      </div>
      <div style="height: 60px;"></div>
      <div style="display: flex;align-items: center; justify-content: center; left: 0;top:140px; position: absolute;width: 100%;height: 30px; ">
            <div style="width: 20px;height:20px;position: absolute;left: -10px;top: 0;background: #f4f6f8;border-radius: 50%;"></div>
            <div style="width: 350px;height: 1px;border-top: 2px dashed #f4f6f8;border-left: 1px dashed #f4f6f8;border-right: 1px dashed #f4f6f8;"></div>
            <div style="width: 20px;height:20px;position: absolute;right: -10px;top: 0;background: #f4f6f8;border-radius: 50%;"></div>

</div>
      <div class="sq-form-block">
        <div class="sq-form-label">申購數量</div>
        <div class="sq-form-input-row">
          <input
            v-model="amount"
            class="sq-input"
            type="number"
            min="30"
            max="3000"
            :placeholder=" headerObj.pp"
          />
          <span class="sq-input-unit">USD</span>
          <button class="sq-all-btn" @click="setAll">全部</button>
        </div>
        <div class="sq-balance-row">
          <span class="sq-balance">可用餘額：{{ availableBalance }} USD</span>
          <span class="sq-transfer" @click="gotoHuazhuan">去劃轉</span>
        </div>
      </div>
      <div class="sq-rule-block">
        <div class="sq-rule-title">規則</div>
        <div class="sq-rule-timeline">
          <div class="sq-rule-item">
            <div class="sq-rule-dot"></div>
            <div class="sq-rule-content">
              <div class="sq-rule-label">申請時間</div>
              <div class="sq-rule-value">2025-07-25 04:20:00</div>
            </div>
          </div>
          <div class="sq-rule-item">
            <div class="sq-rule-dot"></div>
            <div class="sq-rule-content">
              <div class="sq-rule-label">租賃價格</div>
              <div class="sq-rule-value">1 USD</div>
            </div>
          </div>
          <div class="sq-rule-item">
            <div class="sq-rule-dot"></div>
            <div class="sq-rule-content">
              <div class="sq-rule-label">申購數量</div>
              <div class="sq-rule-value">{{ amount || 0 }} USD</div>
            </div>
          </div>
          <div class="sq-rule-item">
            <div class="sq-rule-dot"></div>
            <div class="sq-rule-content">
              <div class="sq-rule-label">預估收益</div>
              <div class="sq-rule-value">{{ estimatedProfit }} USD</div>
            </div>
          </div>
          <div class="sq-rule-item">
            <div class="sq-rule-dot"></div>
            <div class="sq-rule-content">
              <div class="sq-rule-label">到期時間</div>
              <div class="sq-rule-value">2025-07-26 04:20:00</div>
            </div>
          </div>
          <div class="sq-rule-item">
            <div class="sq-rule-dot"></div>
            <div class="sq-rule-content">
              <div class="sq-rule-label">提前贖回手續費</div>
              <div class="sq-rule-value">{{ headerObj.defaultOdds }} %</div>
            </div>
          </div>
        </div>
      </div>
      <button class="sq-apply-btn" @click="showOrder = true">申購</button>
      <!-- 订单确认弹窗 -->
      <div v-if="showOrder" class="order-modal-mask">
        <div class="order-modal">
          <div class="order-modal-header">
            <span class="order-modal-title">訂單資訊</span>
            <span class="order-modal-close" @click="showOrder = false">×</span>
          </div>
          <div class="order-modal-content">
            <div class="order-modal-row"><span>申購時間</span><span>{{ orderTime }}</span></div>
            <div class="order-modal-row"><span>申購數量</span><span>{{ amount || 0 }}</span></div>
            <div class="order-modal-row"><span>租賃價格</span><span>1 USD</span></div>
            <div class="order-modal-row"><span>預估收益</span><span style="color:#00b386">{{ estimatedProfit }} USD</span></div>
            <div class="order-modal-row"><span>到期時間</span><span>{{ expireTime }}</span></div>
          </div>
          <div class="order-modal-footer">
            <button class="order-cancel-btn" @click="showOrder = false">取消</button>
            <button class="order-confirm-btn" @click="confirmOrder">確認下單</button>
          </div>
        </div>
      </div>
      <!-- 申购成功弹窗 -->
      <div v-if="showSuccess" class="sq-success-mask">
        <div class="sq-success-dialog">
          <div class="sq-success-title">申購成功</div>
          <button class="sq-success-close" @click="showSuccess = false">關閉</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
const router = useRouter()
const Route = useRoute()
import { _t18 } from '@/utils/public'
import { financialDetail, financialSubmit } from '@/api/financial/index'
import { useUserStore } from '@/store/user'
// 起投金额 限投金额 锁仓天数
const headerObj = ref({
  leftName: _t18(`starting-amount`),
  centerName: _t18(`Investment_Limit`),
  rightName: _t18(`Lock-up_days`)
})

const props = defineProps({
  id: {
    type: Number,
    default: {}
  }
})

function handleRightClick() {
  router.push('/smartquant-order')
}
function gotoHuazhuan() {
  router.push('/transfer')
}
function formatDate(date) {
  const pad = n => n.toString().padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}
const amount = ref('')
const showSuccess = ref(false)
const showOrder = ref(false)
const now = new Date()
const orderTime = computed(() => formatDate(now))
const expireTime = computed(() => {
  const d = new Date(now.getTime() + 24*60*60*1000)
  return formatDate(d)
})
const userStore = useUserStore()
// 用户余额信息
const { asset } = storeToRefs(userStore)

const availableBalance = ref('') //  可用余额

availableBalance.value =
    asset.value.filter((item) => {
      return item.symbol === 'usdt' && item.type === 2
    })[0].availableAmount + ''

const setAll = () => {
  amount.value = availableBalance.value
}
const estimatedProfit = computed(() => {
  // 0.15%收益，周期1天
  if (!amount.value) return 0
  return (Number(amount.value) * headerObj.value.avgRate).toFixed(4)
})
const confirmOrder = () => {
  
  submit()
}

/**立即购买 */
const submit = async () => {
  const res = await financialSubmit(Route.query.id, amount.value, headerObj.value.days)
  if (res.code === 200) {
    // isSuccess.value = true
    // backwardNum.value = -2
    showOrder.value = false
    showSuccess.value = true
    availableBalance.value =
    asset.value.filter((item) => {
      return item.symbol === 'usdt' && item.type === 2
    })[0].availableAmount + ''
  } else {
    showToast(res.msg)
  }
}

/** 获取详情 */
const getDetail = async () => {
  try {
    // console.log(Route)
    const res = await financialDetail(Route.query.id)
    if (res.code === 200) {
      headerObj.value = res.data
      headerObj.value.pp = headerObj.value.limitMin + "-" + headerObj.value.limitMax
      // const { title, icon, avgRate, days, limitMin, limitMax, coin } = res.data
      // minNum.value = limitMin
      // maxNum.value = limitMax
      // coninName.value = coin.toUpperCase() // 弹窗使用
      // dayNum.value = days
      // headerObj.value = {
      //   title,
      //   icon,
      //   leftNum: limitMin + ' ' + coin.toUpperCase(),
      //   centerNum: limitMax + ' ' + coin.toUpperCase(),
      //   rightNum: days,
      //   ...headerObj.value
      // }
      /**产品详情 */
      // const { process, totalInvestAmount, remainAmount, timeLimit } = res.data
      // proDetail.value = {
      //   title,
      //   process,
      //   totalInvestAmount,
      //   remainAmount,
      //   timeLimit,
      //   avgRate,
      //   coin: coin.toUpperCase()
      // }
    }
  } catch (error) {
    console.log(error)
  }
}
// getDetail()
onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.smart-quant-container {
  background: #000;
  color: #fff;
  border-radius: 32px;
  padding: 32px 18px 18px 18px;
  max-width: 400px;
  margin: 0 auto;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  position: relative;
}
.sq-header {
  text-align: center;
  margin-bottom: 18px;
}
.sq-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.sq-profit {
  font-size: 18px;
  color: #00b386;
  font-weight: 600;
}
.sq-profit-rate {
  color: #00b386;
  font-size: 20px;
  font-weight: bold;
}
.sq-form-block {
  border-radius: 18px;
  margin-bottom: 18px;
}
.sq-form-label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
.sq-form-input-row {
  display: flex;
  align-items: center;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 18px;
  margin-top: 18px;
  border: 1px solid #fff;
}
.sq-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  outline: none;
}
.sq-input-unit {
  margin-left: 8px;
  color: #fff;
  font-size: 15px;
}
.sq-all-btn {
  margin-left: 12px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 4px 12px;
  font-size: 14px;
  cursor: pointer;
}
.sq-balance-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #fff;
}
.sq-transfer {
  color: #ff7e3e;
  cursor: pointer;
}
.sq-rule-block {
  border-radius: 18px;
  margin-bottom: 18px;
  line-height: 3;
}
.sq-rule-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.sq-rule-timeline {
  border-left: 2px dashed #ff7e3e;
  margin-left: 10px;
  padding-left: 11px;
}
.sq-rule-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
  position: relative;
}
.sq-rule-dot {
  width: 14px;
  height: 14px;
  background: #ff7e3e;
  border-radius: 50%;
  position: absolute;
  left: -19px;
  top: 2px;
  border: 2px solid #fff;
}
.sq-rule-content {
  margin-left: 8px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.sq-rule-label {
  font-size: 12px;
  color: #fff;
}
.sq-rule-value {
  font-size: 12px;
  color: #9ca4ab;
  font-weight: 600;
}
.sq-apply-btn {
  width: 100%;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 18px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 18px;
  margin-bottom: 8px;
  transition: background 0.2s;
}
.sq-apply-btn:hover {
  background: #eee;
}
.sq-success-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.sq-success-dialog {
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
}
.sq-success-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 18px;
}
.sq-success-close {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 24px;
  font-size: 16px;
  cursor: pointer;
}
.order-modal-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.order-modal {
  background: #fff;
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 400px;
  padding: 24px 18px 18px 18px;
  box-sizing: border-box;
  animation: slideUp 0.25s;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.order-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.order-modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #111;
}
.order-modal-close {
  font-size: 22px;
  color: #888;
  cursor: pointer;
}
.order-modal-content {
  margin-bottom: 24px;
}
.order-modal-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #111;
  margin-bottom: 14px;
}
.order-modal-row span:last-child {
  font-weight: 600;
}
.order-modal-footer {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.order-cancel-btn {
  flex: 1;
  background: #fff;
  color: #111;
  border: 1px solid #eee;
  border-radius: 24px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.order-confirm-btn {
  flex: 1;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
</style>
